<template>
  <view class="division-container">
    <!-- 填写队伍名称区域 -->
    <view class="section-title">填写队伍名称</view>
    
    <!-- 队伍列表 -->
    <view class="team-list">
      <view class="team-item" v-for="(team, index) in teams" :key="index">
        <input 
          type="text"
          class="team-input"
          :placeholder="'队伍' + (index + 1) + '(默认名称)'"
          v-model="team.name"
        />
        <!-- 在最后一个队伍后面添加减少按钮 -->
        <view class="remove-btn" v-if="index === teams.length - 1 && teams.length > 2" @tap="removeTeam">
          <text class="remove-text">-</text>
        </view>
      </view>
    </view>

    <!-- 添加新队伍 -->
    <view class="add-team" @tap="addTeam">
      <image class="add-icon" src="/static/icons/add.png" />
      <text class="add-text">添加新队伍</text>
    </view>

    <!-- 其他设置区域 -->
    <view class="section-title other-title">其他设置</view>

    <!-- 用户报名时 -->
    <view class="setting-section">
      <text class="setting-label">用户报名时</text>
      <view class="switch-group">
        <switch 
          :checked="isRandomTeam" 
          @change="switchRandomTeam"
          style="margin-right: 20rpx;"
        />
        <text>随机被分配队伍</text>
      </view>
      <view class="switch-group">
        <switch 
          :checked="canChooseTeam"
          @change="switchChooseTeam"
          style="margin-right: 20rpx;"
        />
        <text>自主选择队伍</text>
      </view>
    </view>

    <!-- 每队人数上限 -->
    <view class="setting-section">
      <view class="limit-row">
        <text class="setting-label">每队人数上限</text>
        <view class="limit-input-wrapper">
          <input 
            type="number" 
            class="limit-input"
            v-model="teamLimit"
            placeholder="请输入人数限制"
            @input="handleLimitInput"
            @blur="validateLimit"
          />
        </view>
      </view>
    </view>

    <!-- 底部确定按钮 -->
    <view class="bottom-btn">
      <button class="confirm-btn" type="primary" @tap="confirmSettings">确定</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      teams: [
        { name: '' },
        { name: '' }
      ],
      isRandomTeam: false,
      canChooseTeam: false,
      teamLimit: ''
    }
  },
  onLoad() {
    // 获取上一页传递的设置
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('divisionSettings', (settings) => {
      if (settings) {
        this.teams = settings.teams.length > 0 ? settings.teams : [{ name: '' }, { name: '' }]
        this.isRandomTeam = settings.isRandomTeam
        this.canChooseTeam = settings.canChooseTeam
        this.teamLimit = settings.teamLimit
      }
    })
  },
  methods: {
    // 添加新队伍
    addTeam() {
      if (this.teams.length < 10) {
        this.teams.push({ name: '' })
      } else {
        uni.showToast({
          title: '最多只能添加10个队伍',
          icon: 'none'
        })
      }
    },
    // 切换随机分配
    switchRandomTeam(e) {
      this.isRandomTeam = e.detail.value
      if (e.detail.value) {
        this.canChooseTeam = false
      }
    },
    // 切换自主选择
    switchChooseTeam(e) {
      this.canChooseTeam = e.detail.value
      if (e.detail.value) {
        this.isRandomTeam = false
      }
    },
    // 确认设置
    confirmSettings() {
      const settings = {
        teams: this.teams.filter(team => team.name.trim()),
        isRandomTeam: this.isRandomTeam,
        canChooseTeam: this.canChooseTeam,
        teamLimit: this.teamLimit || '不限',
        enabled: true
      }
      
      // 验证
      if (settings.teams.length < 2) {
        uni.showToast({
          title: '至少需要设置2个队伍',
          icon: 'none'
        })
        return
      }

      // 将设置传回上一页
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      if (prevPage) {
        prevPage.$vm.onDivisionSet(settings)
        uni.navigateBack()
      } else {
        console.error('未找到上一页')
      }
    },
    // 处理人数限制输入
    handleLimitInput(e) {
      let value = e.detail.value
      // 移除非数字字符
      value = value.replace(/\D/g, '')
      // 移除前导零
      value = value.replace(/^0+/, '')
      
      if (value) {
        // 确保数值在1-999之间
        let num = parseInt(value)
        if (num > 999) {
          value = '999'
        } else if (num < 1) {
          value = '1'
        }
      }
      this.teamLimit = value
    },
    // 失去焦点时验证
    validateLimit() {
      if (this.teamLimit === '') {
        this.teamLimit = '不限'
      } else {
        const num = parseInt(this.teamLimit)
        if (isNaN(num) || num < 1) {
          this.teamLimit = '1'
        }
      }
    },
    // 减少队伍
    removeTeam() {
      if (this.teams.length > 2) {
        this.teams.pop()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.division-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    padding: 30rpx 20rpx;
  }

  .team-list {
    background: #fff;
    border-radius: 12rpx;
    padding: 0 20rpx;

    .team-item {
      padding: 20rpx 0;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;

      .team-input {
        flex: 1;
        height: 80rpx;
        font-size: 28rpx;
        padding: 0 20rpx;
      }

      .remove-btn {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20rpx;
        background: #f5f5f5;
        border-radius: 30rpx;

        .remove-text {
          font-size: 40rpx;
          color: #999;
          font-weight: bold;
          line-height: 1;
        }

        &:active {
          background: #eee;
        }
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .team-actions {
    display: flex;
    align-items: center;
    background: #fff;
    margin-top: 2rpx;

    .add-team, .remove-team {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 30rpx 20rpx;

        .add-icon, .remove-icon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
        }

        .add-text, .remove-text {
            color: #666;
            font-size: 28rpx;
        }
    }

    .remove-team {
        border-left: 1px solid #eee;
    }
  }

  .other-title {
    margin-top: 30rpx;
  }

  .setting-section {
    background: #fff;
    padding: 30rpx 20rpx;
    margin-bottom: 2rpx;

    .setting-label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }

    .switch-group {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      text {
        font-size: 28rpx;
        color: #666;
      }
    }

    .limit-row {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .setting-label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 0;
      }

      .limit-input-wrapper {
        flex: 1;
        margin-left: 20rpx;
        
        .limit-input {
          width: 100%;
          height: 80rpx;
          font-size: 28rpx;
          padding: 0 20rpx;
          text-align: right;
        }
      }
    }
  }

  .bottom-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx;
    background: #fff;

    .confirm-btn {
      background: #ff6b6b;
      color: #fff;
      font-size: 32rpx;
      height: 88rpx;
      line-height: 88rpx;
      border-radius: 44rpx;
    }
  }

  .add-team {
    display: flex;
    align-items: center;
    padding: 30rpx 20rpx;
    background: #fff;
    margin-top: 2rpx;

    .add-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
      flex-shrink: 0;
    }

    .add-text {
      color: #666;
      font-size: 28rpx;
    }
  }
}
</style> 